<template>
  <h1>分类列表</h1>
  <el-table :data="items">
    <el-table-column prop="_id" label="ID" width="240" />
    <el-table-column prop="username" label="用户名" />

    <el-table-column fixed="right" label="操作" width="240">
      <template v-slot="scope" #default>
        <el-button
          type="primary"
          size="small"
          @click="$router.push(`/admin_user/create/${scope.row._id}`)"
          >编辑</el-button
        >
        <el-button type="info" size="small" @click="remove(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ref, onBeforeMount } from "vue";
import { getList, deleteList } from "@/api";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  setup() {
    const items = ref([]);
    async function fetch() {
      const res = await getList("admin_user");
      items.value = res.data;
    }
    onBeforeMount(() => {
      // 组件初次在页面渲染之前（创建阶段）唯一一次
      fetch();
    });
    async function remove(row) {
      ElMessageBox.confirm(`是否要删除"${row.username}"`, "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteList("admin_user", row._id);
          console.log(res);
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          fetch();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: `未删除分类`,
          });
        });
    }
    return { items, remove };
  },
};
</script>

<style></style>
